<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style>
			/* input[value] {
				color: red;
			} */
			/* 标签名[属性名称="属性值"] */
			/* input[type="text"] {
				color: red;
			} */
			
			/* div[class^=logo] {
				color: red;
			} */
			div[class$=data]{
				color: red;
			}
			div[class*=api]{
				color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 1.根据属性值的有没有选择标签-->
		<!-- <input type="text" value="请输入要搜索的内容">
		<input type="text"> -->
		
		<!-- 2.根据属性值具体是什么选择标签,即属性名称=属性值 -->
		<!-- <input type="text">
		<input type="password"> -->
		<!-- 3.根据属性值以什么内容开头来选择标签 -->
		
		<div class="logo1">我是logo1</div>
		<div class="logo2">我是logo2</div>
		<div class="logo3">我是logo3</div>
		<div class="logo4">我是logo4</div>
		<div class="icon">我是logo5</div>
		
		<!-- 根据属性值以什么结尾来选择标签 -->
		<div class="service-username-data">我是用户名</div>
		<div class="service-password-data">我是密码</div>
		<div class="service">我是服务端的数据</div>
		
		<!-- 以属性值包含什么内容来选择标签 -->
		<div class="service-api-goodsname">我是商品名称</div>
		<div class="service-api-goodsdesc">我是商品描述</div>
		<div class="service-data">我只是服务端的普通数据</div>
		
	</body>
</html>